<template>
  <div class="register-container">
    <div class="background-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
    <div class="register-card">
      <div class="register-header">
        <div class="logo-container">
          <el-icon class="logo-icon"><Connection /></el-icon>
          <span class="logo-text">JobLinker</span>
        </div>
        <h1 class="title">创建账号</h1>
        <p class="subtitle">加入JobLinker，开启您的职业之旅</p>
      </div>

      <el-form 
        :model="registerForm" 
        :rules="registerRules" 
        ref="registerFormRef" 
        @submit.prevent="handleRegister" 
        class="register-form"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="registerForm.username" 
            placeholder="用户名" 
            :prefix-icon="User"
            size="large"
            autocomplete="username"
          />
        </el-form-item>
        
        <el-form-item prop="email">
          <el-input 
            v-model="registerForm.email" 
            type="email" 
            placeholder="邮箱" 
            :prefix-icon="Message"
            size="large"
            autocomplete="email"
          />
        </el-form-item>

        <el-form-item prop="phone">
          <el-input 
            v-model="registerForm.phone" 
            placeholder="手机号码" 
            :prefix-icon="Phone"
            size="large"
            autocomplete="tel"
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="registerForm.password" 
            type="password" 
            placeholder="密码" 
            :prefix-icon="Lock"
            size="large"
            autocomplete="new-password"
            show-password
          />
        </el-form-item>
        
        <el-form-item prop="confirmPassword">
          <el-input 
            v-model="registerForm.confirmPassword" 
            type="password" 
            placeholder="确认密码" 
            :prefix-icon="Lock"
            size="large"
            autocomplete="new-password"
            show-password
          />
        </el-form-item>
        
        <el-form-item prop="role" class="role-form-item">
          <div class="role-label">请选择您的身份：</div>
          <el-radio-group v-model="registerForm.role" class="role-group">
            <el-radio :label="0" class="role-radio">
              <el-icon><User /></el-icon>
              <span>我是求职者</span>
            </el-radio>
            <el-radio :label="1" class="role-radio">
              <el-icon><Briefcase /></el-icon>
              <span>我是招聘者</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item prop="agreement" class="agreement-form-item">
          <el-checkbox v-model="registerForm.agreement" class="agreement-checkbox">
            我已阅读并同意 
            <router-link to="/terms" class="terms-link">服务条款</router-link> 
            和 
            <router-link to="/privacy" class="terms-link">隐私政策</router-link>
          </el-checkbox>
        </el-form-item>
        
        <el-button 
          type="primary" 
          native-type="submit" 
          class="submit-btn" 
          :loading="loading"
          size="large"
        >
          立即注册
        </el-button>
      </el-form>

      <div class="login-prompt">
        <span>已有账号?</span>
        <router-link to="/auth/login" class="login-link">
          立即登录
          <el-icon><ArrowRight /></el-icon>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Message, Phone, Briefcase, ArrowRight, Connection } from '@element-plus/icons-vue'
import { register } from '@/api/auth'

const router = useRouter()
const registerFormRef = ref(null)
const loading = ref(false)

const registerForm = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  role: 0,
  agreement: false
})

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const validateAgreement = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请阅读并同意服务条款和隐私政策'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3到20个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符之间', trigger: 'blur' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择用户类型', trigger: 'change' }
  ],
  agreement: [
    { validator: validateAgreement, trigger: 'change' }
  ]
}

const handleRegister = async () => {
  if (!registerFormRef.value) return
  
  await registerFormRef.value.validate(async (valid, fields) => {
    if (!valid) {
      return
    }
    
    try {
      loading.value = true
      const response = await register({
        username: registerForm.username,
        email: registerForm.email,
        phone: registerForm.phone,
        password: registerForm.password,
        role: registerForm.role
      })
      
      ElMessage.success('注册成功！请登录您的账号')
      
      setTimeout(() => {
        router.push('/auth/login')
      }, 1500)
    } catch (error) {
      console.error('注册失败', error)
    } finally {
      loading.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  padding: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  animation: float 15s infinite ease-in-out;
}

.shape-1 {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
  animation-delay: 0s;
}

.shape-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
  animation-delay: 2s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 20%;
  background: radial-gradient(circle at center, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05));
  animation-delay: 4s;
}

.shape-4 {
  width: 400px;
  height: 400px;
  bottom: 10%;
  right: 10%;
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.05));
  animation-delay: 6s;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
  }
  33% {
    transform: translateY(-20px) translateX(10px) rotate(5deg);
  }
  66% {
    transform: translateY(10px) translateX(-10px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0);
  }
}

.register-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 2rem;
  width: 100%;
  max-width: 480px;
  animation: slideUp 0.8s ease-out;
  margin: auto;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow-y: auto;
  max-height: 90vh;
}

.register-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  
  .logo-icon {
    font-size: 2.5rem;
    color: #3b82f6;
    margin-right: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  }
  
  .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 0.5rem;
}

.subtitle {
  color: var(--el-text-color-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.register-form {
  margin-bottom: 1.5rem;

  :deep(.el-input__wrapper) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover, &:focus-within {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

.role-form-item {
  margin-bottom: 1.5rem;
}

.role-label {
  color: var(--el-text-color-regular);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.role-group {
  display: flex;
  gap: 1rem;
  width: 100%;

  .role-radio {
    flex: 1;
    height: 80px;
    margin: 0;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);

    :deep(.el-radio__input) {
      display: none;
    }

    :deep(.el-radio__label) {
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .el-icon {
      font-size: 24px;
      color: var(--el-text-color-secondary);
    }

    span {
      font-size: 0.95rem;
      color: var(--el-text-color-primary);
    }

    &:hover {
      border-color: #3b82f6;
      background-color: rgba(59, 130, 246, 0.05);
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(59, 130, 246, 0.15);
    }

    &.is-checked {
      border-color: #3b82f6;
      background-color: rgba(59, 130, 246, 0.1);
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);

      .el-icon {
        color: #3b82f6;
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
      }

      span {
        color: #3b82f6;
        font-weight: 500;
      }
    }
  }
}

.agreement-form-item {
  margin-bottom: 1.5rem;
}

.agreement-checkbox {
  :deep(.el-checkbox__label) {
    font-size: 0.9rem;
    color: var(--el-text-color-secondary);
  }
}

.terms-link {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.3s ease;

  &:hover {
    color: #2563eb;
  }
}

.submit-btn {
  width: 100%;
  height: 44px;
  font-size: 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
  }
}

.login-prompt {
  text-align: center;
  color: var(--el-text-color-secondary);
  font-size: 0.95rem;
  margin-top: 1.5rem;

  .login-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;

    &:hover {
      color: #2563eb;
      transform: translateX(4px);
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .register-card {
    max-width: 90%;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .register-container {
    padding: 1rem;
    align-items: center;
  }

  .register-card {
    padding: 1.25rem;
    margin: 0 auto;
    max-width: 100%;
    max-height: 85vh;
  }
  
  .title {
    font-size: 1.5rem;
  }

  .role-group {
    flex-direction: column;
  }
}
</style> 